<template>
  <div class="edit">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{form.name}}</span>
        <el-button @click="$router.go(-1)" style="float: right; padding: 3px 0" type="text">返回</el-button>
      </div>
      <el-form v-if="form.id == 1" ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="首页视频" prop="videoUrl">
          <el-radio-group v-model="uploadType" size="small">
            <el-radio :label="1">本地上传</el-radio>
            <el-radio :label="2">输入视频地址</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="视频封面图" v-if="uploadType === 1">
          <Upload v-model="form.videoCover" @clear="clearImageValidate('videoCover')" />
          <Upload type="video" v-model="form.videoUrl" @clear="clearImageValidate('videoUrl')" />
        </el-form-item>
        <el-form-item label="视频地址" v-if="uploadType === 2">
          <el-input v-model="form.videoUrl" placeholder="请输入视频地址" />
        </el-form-item>
        <el-form-item label="视频封面图地址" v-if="uploadType === 2">
          <el-input v-model="form.videoCover" placeholder="请输入视频封面图地址" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="cancel">重置</el-button>
        </el-form-item>
      </el-form>

      <el-form v-if="form.id == 2" ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="视频上传" prop="videoUrl">
          <el-radio-group v-model="uploadType" size="small">
            <el-radio :label="1">本地上传</el-radio>
            <el-radio :label="2">输入视频地址</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="视频封面图" v-if="uploadType === 1">
          <Upload v-model="form.videoCover" @clear="clearImageValidate('videoCover')" />
          <Upload type="video" v-model="form.videoUrl" @clear="clearImageValidate('videoUrl')" />
        </el-form-item>
        <el-form-item label="视频地址" v-if="uploadType === 2">
          <el-input v-model="form.videoUrl" placeholder="请输入视频地址" />
        </el-form-item>
        <el-form-item label="视频封面图地址" v-if="uploadType === 2">
          <el-input v-model="form.videoCover" placeholder="请输入视频封面图地址" />
        </el-form-item>

        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="简介" prop="content">
          <Editor v-model="form.content" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="cancel">重置</el-button>
        </el-form-item>
      </el-form>

      <el-form v-if="form.id == 3" ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="封面" prop="cover">
          <Upload v-model="form.cover" @clear="clearImageValidate" />
        </el-form-item>

        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="简介" prop="desc">
          <el-input type="textarea" :row="5" v-model="form.desc" placeholder="请输入简介" />
        </el-form-item>
        <el-form-item label="内容详情" prop="content">
          <Editor v-model="form.content" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="cancel">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import Upload from "@/components/Upload";
import Editor from "@/components/Editor";
import {
  getAppContentSetting,
  updateAppContentSetting
} from "@/api/system/appContentSetting";

export default {
  name: "AppContentSettingEdit",
  components: {
    Upload,
    Editor
  },
  data() {
    return {
      // 表单参数
      form: {
        cover: "",
        videoUrl: "",
        title: "",
        content: ""
      },
      uploadType: 1,

      // 表单校验
      rules: {
        cover: [{ required: true, message: "请上传封面" }],
        videoUrl: [{ required: true, message: "请上传视频" }],
        title: [{ required: true, message: "请输入标题", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this.getEditInfo();
  },
  methods: {
    clearImageValidate() {
      this.rules.imageUrl = [];
      this.$refs["form"].clearValidate("imageUrl");
    },
    getEditInfo() {
      const id = this.$route.query.id;
      if (id) {
        getAppContentSetting(id).then(response => {
          this.form = response.data;
          this.uploadType = this.form.videoUrl ? 2 : 1;
        });
      }
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const postData = {
            ...this.form,
            content: this.filterContent(this.form.content)
          };
          if (this.form.id != null) {
            updateAppContentSetting(postData).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.$router.go(-1);
              }
            });
          }
        }
      });
    },
    // 重置按钮
    cancel() {
      this.getEditInfo();
      this.resetForm("form");
    }
  },
  watch: {
    "form.videoUrl"(value) {
      if (value) {
        this.uploadType = 2;
      }
    }
  }
};
</script>
